<template>
  <tui-picture-cropper
    lockRatio
    :imageUrl="imageUrl"
    @ready="ready"
    @cropper="cropper"
    rotateImg="/static/img_rotate.png"
  ></tui-picture-cropper>
</template>

<script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { getCurrentInstance, ref } from 'vue';

  const imageUrl = ref('');
  const src = ref('');
  const eventEmitter = ref();

  onLoad((option: any) => {
    //@ts-ignore
    eventEmitter.value = getCurrentInstance()?.proxy?.getOpenerEventChannel();
    src.value = option.src || '';
    src.value &&
      uni.showLoading({
        title: '请稍候...',
        mask: true,
      });
  });

  const ready = () => {
    imageUrl.value = src.value;
  };

  const cropper = (e) => {
    if (e.url) {
      eventEmitter.value.emit('cropperPicPath', e.url);
      uni.navigateBack();
    }
  };
</script>
